import { useEffect, useState } from 'react'
import type { FC } from 'react'

import styles from './styles.module.scss'
import { closeFnSet } from './index'

interface ConfirmProps {
  content: string
  onClose: () => void
  onConfirm: () => void
}

const Show: FC<ConfirmProps> = (props) => {
  const [active, setActive] = useState(false)
  useEffect(() => {
    setActive(true)
  }, [])
  return (
    <div
      className={active ? `${styles['alert-mask']} ${styles.active}` : `${styles['alert-mask']}`}
    >
      <div className={styles['alert-content']}>
        <div className={styles['alert-body']}>{props.content}</div>
        <div className={styles['alert-btns']}>
          <div
            className={styles['alert-btn']}
            onClick={() => {
              closeFnSet.forEach((item) => {
                item()
              })
              closeFnSet.clear()
              props.onClose && props.onClose()
            }}
          >
						知道了
          </div>
        </div>
      </div>
    </div>
  )
}

export default Show
